<template>
    <section class="todoapp">
		<mvc-top @conent="add"></mvc-top>
		<mvc-list :todo-arr="todoList" @complete="toggle" @del="del"></mvc-list>
		<mvc-btm @clear="cleal" @screeing="screeing" :total="sum"></mvc-btm>
	</section>
</template>

<script>
import MvcTop from "./top.vue"
import MvcList from "./list.vue"
import MvcBtm from "./btm.vue"
export default {
    name:"home",
    components:{ MvcTop,MvcList,MvcBtm },
    data(){
        return{
            allList:[
                // {id:1,title:"写简历",completed:false},
                // {id:2,title:"打疫苗",completed:true},
                // {id:3,title:"吃饭",completed:false},
                // {id:4,title:"睡觉",completed:true},
            ],
            todoList:[],
            status:""
        }
    },
    created() {
        this.allList = JSON.parse(localStorage.getItem("allList")) || []
        this.todoList = this.allList
    },
    methods: {
        toggle(item){
            item.completed = !item.completed
            localStorage.setItem("allList",JSON.stringify(this.allList))
        },
        add(val){
            let maxID = this.allList.reduce((tmp,item) => tmp>item.id ? tmp : item.id,1)
            this.allList.push({
                id:++maxID,
                title:val,
                completed:false
            })
            this.reset()
        },
        del(index){
            this.allList.splice(index,1);
            this.reset()
        },
        cleal(){
            this.allList = this.allList.filter(item=>item.completed==false)
            this.reset()
        },
        screeing(index){
            if (index==0) {
                this.todoList = this.allList
            }
            if (index==1) {
                this.todoList = this.allList.filter(item=>item.completed==false)
            }
            if (index==2) {
                this.todoList = this.allList.filter(item=>item.completed==true)
            }
            this.status = index
        },
        reset(){
            this.todoList = this.allList.filter(item=>{
                if (this.status==0) {
                    return true
                }
                if (this.status==1) {
                    return item.completed == false
                }
                if (this.status==2) {
                    return item.completed == true
                }
            })
            localStorage.setItem("allList",JSON.stringify(this.allList))
        }
    },
    computed:{
        sum(){
            return this.todoList.length
        }
    }
}
</script>

<style>

</style>